<template>
	<view class="main">
		<view class="header">
			<view class="title">
				忘记密码？
			</view>
			<view class="desc">
				请填写以下信息进行重置
			</view>
		</view>
		<view class="block" v-show="step == 1">
			<view class="form_warp">
				<view class="row">
					<view class="label f30">
						手机号
					</view>
					<view class="input_warp">
						<input type="text" class="f28" v-model="formData.phone" placeholder="请输入您的账号">
					</view>
				</view>
				<view class="row">
					<view class="label f30">
						验证码
					</view>
					<view class="input_warp gui-flex gui-align-items-center">
						<input type="text" class="f28 gui-flex1" v-model="formData.code" placeholder="请输入验证码">
						<button class="send_btn" @tap="sendCode">{{reg_codeTips}}</button>
					</view>
				</view>
			</view>
			<view class="btn_warp">
				<button class="btn_log" @click="next">下一步</button>
			</view>
		</view>
		<view class="block" v-show="step == 2">
			<view class="form_warp">
				<view class="row">
					<view class="label f30">
						新密码
					</view>
					<view class="input_warp gui-flex gui-align-items-center">
						<input type="password" class="gui-form-input f28 gui-flex1" v-if="isPwd"
							v-model="formData.password" name="password" placeholder="请输入密码" />
						<input type="text" class="gui-form-input f28 gui-flex1" v-if="!isPwd" :disabled="true"
							v-model="formData.password" name="password" placeholder="请输入密码" />
						<text class="gui-form-icon gui-icons gui-text-center" @click="changePwdType"
							:style="{color:isPwd?'#999999':'#008AFF'}">&#xe609;</text>
					</view>
				</view>
				<view class="row">
					<view class="label f30">
						再次确认密码
					</view>
					<view class="input_warp gui-flex gui-align-items-center">
						<input type="password" class="gui-form-input f28 gui-flex1" v-if="verify_isPwd"
							v-model="formData.verify_password" name="password" placeholder="请输入密码" />
						<input type="text" class="gui-form-input f28 gui-flex1" v-if="!verify_isPwd" :disabled="true"
							v-model="formData.verify_password" name="password" placeholder="请输入密码" />
						<text class="gui-form-icon gui-icons gui-text-center" @click="verifyChangePwdType"
							:style="{color:verify_isPwd?'#999999':'#008AFF'}">&#xe609;</text>
					</view>
				</view>
			</view>
			<view class="btn_warp">
				<button class="btn_log" @click="sumbit">提交</button>
			</view>
		</view>
		<bai-msg @close="msgClose" ref="baiMsg"></bai-msg>
	</view>
</template>

<script>
	var graceChecker = require("@/GraceUI5/js/checker.js");
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isClick: true,
				// 密码可视 类型切换
				isPwd: true,
				verify_isPwd: true,
				step: 1,
				formData: {
					phone: '',
					code: '',
					password: '',
					verify_password: '',
				},
				reg_onCode: true,
				reg_codeTime: 60,
				reg_codeTips: "发送验证码",
			}
		},
		onLoad() {

		},
		methods: {
			...mapActions(['logout']),
			// 密码可视 类型切换
			changePwdType: function() {
				this.isPwd = !this.isPwd;
			},
			verifyChangePwdType: function() {
				this.verify_isPwd = !this.verify_isPwd;
			},
			next() {
				//定义表单规则
				let rule = [{
					name: 'phone',
					checkType: 'phoneno',
					errorMsg: '请输入正确的手机号'
				}, {
					name: 'code',
					checkType: 'notnull',
					errorMsg: '请输入验证码'
				}];
				let checkRes = graceChecker.check(this.formData, rule);
				if (checkRes) {
					this.step = 2;
				} else {
					this.$u.msg(graceChecker.error);
				}
			},
			openMsg() {
				this.$refs.baiMsg.open();
			},
			msgClose() {
				this.$u.to(`/pages/login/login`, 'redirectTo')
			},
			// 修改用户信息
			sumbit() {
				//定义表单规则
				let rule = [{
					name: 'phone',
					checkType: 'phoneno',
					errorMsg: '请输入正确的手机号'
				}, {
					name: 'code',
					checkType: 'notnull',
					errorMsg: '请输入验证码'
				}, {
					name: 'password',
					checkType: 'password',
					errorMsg: '密码格式有误（4到16位字母，数字，下划线，减号）'
				}, {
					name: 'verify_password',
					checkType: 'password',
					errorMsg: '密码格式有误（4到16位字母，数字，下划线，减号）'
				}, {
					name: "verify_password",
					checkType: "samewith",
					checkRule: "password",
					errorMsg: "两次密码输入不一致"
				}];
				let checkRes = graceChecker.check(this.formData, rule);
				if (checkRes) {
					if (this.isClick) {
						this.isClick = !this.isClick;
					} else {
						return;
					}
					this.$api.updatePassword(this.formData).then(res => {
						console.log(res);
						if (res.code == 200) {
							this.openMsg();
							this.logout();
							setTimeout(() => {
								this.$u.back();
							}, 1000)
						}else if(res.msg == '验证码错误'){
							this.$u.msg("验证码错误");
							this.step = 1;
						}
					}).finally(e => {
						console.log(e);
						this.isClick = true;
					})
				} else {
					this.$u.msg(graceChecker.error);
				}
			},
			/* 发送验证码 */
			sendCode() {
				if (!this.reg_onCode) {
					return;
				}
				let formData = {
					phone: this.formData.phone
				}
				//定义表单规则
				let rule = [{
					name: 'phone',
					checkType: 'phoneno',
					errorMsg: '请输入正确的手机号'
				}];
				let checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					this.reg_onCode = false;
					this.reg_codeTime = 60;
					this.reg_codeTips = `${this.reg_codeTime}s`;
					this.$api.getSms({
						phone: formData.phone
					}).then((res) => {
						if (res.code == 200) {
							this.$u.msg('验证码发送成功');
						} else {
							this.reg_codeTips = "重新获取";
							this.reg_onCode = true;
							this.$u.msg('发送失败');
							return;
						}
						let codeCd = null;
						if (codeCd != null) clearInterval(codeCd);
						codeCd = setInterval(() => {
							this.reg_codeTips = `${--this.reg_codeTime}s`;
							if (this.reg_codeTime <= 0) {
								this.reg_codeTips = "重新获取";
								this.reg_onCode = true;
								clearInterval(codeCd);
							}
						}, 1000);
					});
				} else {
					this.$u.msg(graceChecker.error);
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "login.scss";
</style>